<template>
  <div>
    <audio
      id="ancyaudio"
      preload="auto"
      @error="ancyPlayAudioError"
      @ended="ancyPlayAudioEnd"
      @onPlayTimeChange="ancyOnPlayTimeChange"
      :curPlayTime="ancyaudioPlayTime"
      class="c-pf c-p-l-100"
    ></audio>
    <div
      class="c-pb100"
      v-if="questionInfo!=null"
    >
      <div class="c-pv30 c-flex-row c-justify-center c-fc-gray c-fs28">
        <span>{{curNum}}/{{questionInfo.allNum}}</span>
      </div>
      <div class="c-fs-36 c-fw-b c-pv10 c-ph32">
        {{typeQueMap[questionInfo.type]}}
      </div>
      <div class="c-pb60 c-fs28 c-pt28 c-ph32 c-wb-ba">
        <span class="fl c-lh30">{{curNum}}、</span>
        <span
          class="c-lh30"
          :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
          v-html="questionInfo.problem"
        ></span>
      </div>
      <template v-if="questionInfo.type != 5">
        <div
          v-for="(item,index) in questionInfo.optionArr"
          :key="index"
          class="c-flex-row c-pv20 c-fs28 c-ph32"
        >
          <div v-if="questionInfo.userAnswer"
            class="c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c"
            :class="questionInfo.userAnswer.indexOf(item.option) > -1 &&questionInfo.answer.indexOf(item.option) > -1 ? 'c-bg-blue c-fc-white':questionInfo.userAnswer.indexOf(item.option) > -1 && questionInfo.answer.indexOf(item.option) <= -1 ? 'c-bg-red c-fc-white':'c-bg-mgray'"
          >
            {{questionInfo.userAnswer.indexOf(item.option) > -1 && questionInfo.answer.indexOf(item.option) == -1 ? 'X'
              :item.option}}
          </div>
          <div
            class="c-pl20 c-flex-grow1 c-w0 c-lh50"
            :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
            v-html="item.answer"
          >
          </div>
        </div>
      </template>
      <div
        v-if="questionInfo.type != 5"
        class="c-fs28 c-ph32 c-pt40"
      >
        <span>参考答案:</span>
        <span class="c-pl30">{{questionInfo.answer}}</span>
        <span class="c-pl60">你的答案：</span>
        <span class="c-pl30 c-fc-sorange">{{questionInfo.userAnswer==""?"未答题":questionInfo.userAnswer}}</span>
      </div>
      <div
        v-else
        class="c-fs28 c-ph32"
      >
        <div class="c-fw-b">参考答案:</div>
        <div
          class="c-pt20 c-ph20 c-flex-row c-fs22"
          v-for="(item,index) in questionInfo.optionArr"
          :key="index"
        >
          <div class="c-ww36 c-hh36 c-brp50 c-flex-row c-flex-center c-bg-mgray">{{index * 1 + 1}}</div>
          <div class="c-flex-grow1 c-lh36 c-w0 c-ml20 c-wb-ba">
            {{item.join(';')}}
          </div>
        </div>

        <div class="c-fw-b c-pt30">你的答案:</div>
        <div
          class="c-pt20 c-ph20 c-flex-row c-fs22"
          v-for="(item,index) in myAnswer"
          :key="index"
        >
          <div class="c-ww36 c-hh36 c-brp50 c-flex-row c-flex-center c-bg-mgray">{{index * 1 + 1}}</div>
          <div class="c-flex-grow1 c-lh36 c-w0 c-ml20 c-wb-ba">
            {{item}}
          </div>
        </div>

      </div>
      <div class="c-ph32 c-fs28 c-fw-b c-pt48">解析：</div>
      <div v-if="questionInfo.analysis"
        class="c-ph32 c-fs28 c-pt12 c-pb100 c-ww-bw c-wb-ba c-contexty-scroll"
        :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
        v-html="questionInfo.analysis"
      ></div>
      <div class="c-ph32">
        <!-- 视频解析 -->
        <section v-show="questionInfo.analysisRtype==1&&questionInfo.analysisRurl!=''&&questionInfo.analysisRurl" class="c-hh360 c-p c-mt14">
          <div id="ancyVideoIntroParent" class="c-w100-im"></div>
          <div v-show="!ancyPlaying" class="c-pa c-p-l0 c-p-t0 c-p-r0 c-h c-flex-row c-aligni-center c-justify-center c-pz100 c-bg-black" @click="VideoplayAncy">
            <span class="iconfont c-fc-white c-fs100">&#xe869;</span>
          </div>
          <div class="c-p-l0 c-pa c-ph16 c-p-t0 c-w100 c-h c-pz100" v-if="questionInfo.assetStatus==-1">
            <div class="c-br8 c-translucent-balck60 c-w100 c-h">
              <div class="iconfont c-fc-white c-fs108 c-textAlign-c c-pt100">&#xe963;</div>
              <div class="c-fs24 c-fc-f2 c-textAlign-c">该视频已被管理员删除，如有疑问请咨询客服</div>
            </div>
          </div>
        </section>
        <!-- 音频解析 -->
        <section v-show="questionInfo.analysisRtype==2&&questionInfo.analysisRurl!=''&&questionInfo.analysisRurl" class="c-mt14">
          <div class="c-bg-xgreen c-flex-row c-aligni-center c-br8 c-ph16 c-p">
            <div class="c-mr30 c-ww54"><img class="c-w100" src="@/assets/i/wap/exam/voice_icon.png" alt=""></div>
            <div class="c-flex-grow1 c-mr48">
              <div class="c-fc-white c-fs20 c-mt14 c-mb10 c-maxw440">{{questionInfo.analysisRname}}</div>
              <vue-slider class="audioPlay" :height="2" :processStyle="processStyle" :railStyle="railStyle" :dotOptions="dotOptions" v-model="ancyaudioPlayTime" tooltip="none" :lazy="true" :max="ancyduration"
                @drag-start="ancydragStart" @dragging="ancydragging" @drag-end="ancydragEnddragEnd" @change="ancyinputChange">
                <template slot="dot">
                  <div class="dot-peinner c-ww22 c-hh22 c-brp50"><span class="c-ww22" style="text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"></span></div>
                </template>
              </vue-slider>
              <div class="c-flex-row c-aligni-center c-justify-sb c-fs16 c-fc-white c-mt5 c-pb15">
                <div>{{ancyplaytime}}</div>
                <div>{{ancyplaytotalTime}}</div>
              </div>
            </div>
            <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="ancyshowFirstSpeak" @click="ancyfirstPlay">&#xe8ed;</div>
            <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="!ancyshowLoudspeaker&&!ancyshowFirstSpeak" @click="ancyreplay">&#xe8ed;</div>
            <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="ancyshowLoudspeaker && !ancyshowFirstSpeak" @click="ancypause">&#xe8ef;</div>
            <div v-if="questionInfo.assetStatus==-1" class="c-flex-row c-aligni-center c-br8 c-ph16 c-pa c-translucent-balck60 c-p-t0 c-pz10 c-p-l0 c-w100 c-h">
              <div class="iconfont c-fc-white c-fs40">&#xe963;</div>
              <div class="c-fs24 c-fc-f2 c-ml16">该音频已被管理员删除，如有疑问请咨询客服</div>
            </div>
          </div>
        </section>
      </div>
      <div class="c-flex-row c-hh80 c-aligni-center c-bd-t1 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz100">
        <div
          class="c-flex-grow1 c-w0 c-bd-r1 c-textAlign-c c-fs28"
          :class="questionInfo.beforeNum ? '' : 'c-fc-gray'"
          @click="clickPreQue"
        >上一题</div>
        <div
          class="c-flex-grow1 c-w0 c-textAlign-c c-fs28"
          @click="clickNextQue"
        >{{questionInfo.nextNum ? '下一题':'查看完成'}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  utilJs
} from '@/utils/common.js'
import VueSlider from "vue-slider-component";
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
let curHwId = ''; //当前题目
let ancyPlayer = null;
let ancyisCanPlay = false;
let ancyplayTimeControl = null;
export default {
  name: "AnswerAnalyze",
  components: {
    VueSlider
  },
  props: [],
  data() {
    return {
      typeQueMap: {
        1: '单选题',
        2: '多选题',
        4: '判断题',
        5: '填空题',
      },
      theme: localStorage.getItem("colorName") || 'mb5_default',
      cfg: JSON.parse(localStorage.getItem("cfg")),
      questionInfo: null,
      myAnswer: [],
      curNum: '',
      examMainId: '',
      ancyPlaying:false,
      processStyle: {
        "background-color": "#fff"
      },
      railStyle: {
        "background": "rgba(255,255,255,0.3)"
      },
      dotOptions: {
        style: {
          border: "1px solid #fff",
        },
      }, //进度条组件样式
      ancydragFlag: false, //进度拖拽
      ancyaudioPlayTime:0,
      ancyplaytotalTime: '00:00:00',
      ancyduration:0,
      ancyshowFirstSpeak: true,
      ancyshowLoudspeaker: false,
    };
  },
  created() {
    utilJs.appShare(this);
  },

  mounted() {
    this.ancyshowFirstSpeak = true
    this.ancyshowLoudspeaker = false
    this.ancyaudioPlayTime = 0
  },
  methods: {
    //点击上一题
    clickPreQue() {
      if (this.questionInfo.beforeNum) {
        this.curNum = this.questionInfo.beforeNum;
        this.getChooseDatail();
      }
    },

    //点击下一题
    clickNextQue() {
      if (this.questionInfo.nextNum) {
        this.curNum = this.questionInfo.nextNum;
        this.getChooseDatail();
      } else {
        this.$router.go(-1);
        // this.$routerGo(this, "push", {
        //   path: "/homePage/clockIn/homeWorkResult",
        //   query: {
        //     examMainId: this.examMainId,
        //     isFromWrong: this.isFromWrong,
        //     isFromAnalyze: true
        //   }
        // });
      }
    },
    //获取选择题信息
    getChooseDatail() {
      let $this = this
      this.ancyPlaying = false;
      this.ancyduration = 0;
      this.ancyshowFirstSpeak = true
      this.ancyshowLoudspeaker = false;
      this.ancyaudioPlayTime = 0;
      this.ancyplaytime = '00:00:00';
      this.ancyplaytotalTime = '00:00:00';
      clearInterval(ancyplayTimeControl);
      utilJs.getMethod(`${global.apiurl}signCard/questionShow/${curHwId}?number=${this.curNum}&isCheckAnswer=1&day=${this.curDate}`,
        res => {
          this.questionInfo = res;
          this.examMainId = res.examMainId;
          if (ancyPlayer) {
            destoryPlayer(ancyPlayer);
            ancyPlayer = null;
            // document.querySelector("#liveVideoIntroParent").innerHTML = "";
          }
          if ($this.questionInfo.assetStatus == 1 && $this.questionInfo.analysisRurl && $this.questionInfo.analysisRurl != '' && $this.questionInfo.analysisRtype == 1) {
            console.log(11111111111111111)
            $this.$nextTick(function () {
              $this.initQPlayerAncy();
            })
          }
          let ancyaudio = document.getElementById("ancyaudio");
          ancyaudio.src = '';
          if ($this.questionInfo.analysisRurl != '' && $this.questionInfo.analysisRtype == 2) {
            // $this.$nextTick(function () {
            ancyaudio.src = $this.questionInfo.analysisRurl;
            document.getElementById('ancyaudio').removeEventListener('timeupdate', $this.ancyAudioTimeUpdate);
            document.getElementById('ancyaudio').removeEventListener('canplay', $this.ancyAudioCanPlay);
            document.getElementById('ancyaudio').addEventListener('timeupdate', $this.ancyAudioTimeUpdate);
            document.getElementById('ancyaudio').addEventListener('canplay', $this.ancyAudioCanPlay);
            // })
          }
          this.myAnswer = res.userAnswer ? JSON.parse(res.userAnswer) : [];
        }
      );
    },
    initQPlayerAncy() {
      console.log(111)
      let videoObj = {
        videoMp4: this.questionInfo.analysisRurl,
        videoM3U8: this.questionInfo.analysisRurl,
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../public/i/wap/index/poster.png")
      };
      ancyPlayer = getXgplayer("ancyVideoIntroParent", videoObj);
      ancyPlayer.on('ready', () => {
        if (document.querySelector(".xgplayer-start")) {
          document.querySelector(".xgplayer-start").style.zIndex = 98;
        }
      })
      if (document.querySelector(".xgplayer-start")) {
        document.querySelector(".xgplayer-start").style.zIndex = '98';
      }
      ancyPlayer.on("play", () => {
      });
    },
    VideoplayAncy() {
      if (this.questionInfo.analysisRurl) {
        ancyPlayer.play()
        this.ancyPlaying = true
      }
    },
          //开始播放音频
    ancyAudioCanPlay(e) {
      ancyisCanPlay = true;
      this.ancyduration = Math.floor(e.target.duration);
      this.ancyduration = Math.floor(document.getElementById('ancyaudio').duration)
      this.ancyplaytotalTime = this.timeToStr(this.ancyduration)
    },
    ancyAudioTimeUpdate() {
      // //如果正在拖动  还不能播放，则不更新时间
      if (this.ancydragFlag && !ancyisCanPlay) {
        return;
      }
      ancyplayTimeControl = setTimeout(() => {
        if (document.getElementById('ancyaudio') && Math.floor(document.getElementById('ancyaudio').currentTime) > 0) {
          this.ancyaudioPlayTime = Math.floor(document.getElementById('ancyaudio').currentTime);
          this.ancyplaytime = this.timeToStr(this.ancyaudioPlayTime)
        }
      }, 200)
    },
    ancyreplay() {
      this.ancyaudioPlayTime = 0
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
      this.ancyshowLoudspeaker = true;
      this.ancyplayRadio();
    },
    ancypause() {
      this.ancyshowFirstSpeak = true
      document.getElementById("ancyaudio").pause();
    },
    ancyplayRadio() {
      let audio = document.getElementById("ancyaudio");
      if (this.questionInfo.analysisRtype == 2 && this.questionInfo.analysisRurl != '') {
        if (this.isWeiXin) {
          try {
            document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  document.getElementById("ancyaudio").play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                document.getElementById("ancyaudio").play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
          } catch (error) {
            // continue regardless of error
          }
        } else {
          audio.load();
          audio.play();
        }
      }
    },
    ancyPlayAudioEnd() {
      this.ancyshowLoudspeaker = false;
    },
    ancyOnPlayTimeChange(playTime) {
      this.ancyaudioPlayTime = playTime;
    },
    ancyPlayAudioError() {},
    ancydragging() {
      this.ancydragFlag = true;
      clearInterval(ancyplayTimeControl);
      console.log("dragging------");
    },
    //拖动结束，更改播放器当前时间，重新开始循环获取当前时间
    ancydragEnddragEnd() {
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
      this.ancydragFlag = false;
      console.log("dragEnd-----------");
    },
    ancyfirstPlay() {
      this.ancyshowFirstSpeak = false;
      this.ancyshowLoudspeaker = true;
      this.ancyplayRadio();
    },
    timeToStr(timeSecond) {
      //将秒转化为00:00:00格式
      let hour =
        Math.floor(timeSecond / 3600) >= 10
          ? Math.floor(timeSecond / 3600)
          : "0" + Math.floor(timeSecond / 3600);
      let minute =
        Math.floor((timeSecond % 3600) / 60) >= 10
          ? Math.floor((timeSecond % 3600) / 60)
          : "0" + Math.floor((timeSecond % 3600) / 60);
      let second =
        Math.floor(timeSecond % 60) >= 10
          ? Math.floor(timeSecond % 60)
          : "0" + Math.floor(timeSecond % 60);
      return hour + ":" + minute + ":" + second;
    },
    ancydragStart() {
      this.ancydragFlag = true;
    },
    ancyinputChange() {
      console.log("inputChange-----------");
      if (this.ancydragFlag) {
        this.ancydragFlag = false;
        return;
      }
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
    },
    //分享
    wechatShare: function () {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.wechatConfig(
        shareData.shareUrl,
        shareData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let title = window.localStorage.getItem("companyName");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    }
  },
  deactivated() {
    if (ancyPlayer) {
      destoryPlayer(ancyPlayer);
      ancyPlayer = null;
    }
  },
  beforeRouteLeave(to, from, next) {
    if (ancyPlayer) {
      destoryPlayer(ancyPlayer);
      ancyPlayer = null;
      // document.querySelector("#liveVideoIntroParent").innerHTML = "";
    }
    next();
  },
  activated() {
    setDocumentTitle("答题解析");// eslint-disable-line
    curHwId = this.$route.query.curHwId;
    this.curNum = this.$route.query.curNum;
    this.isFromWrong = this.$route.query.isFromWrong || '';
    this.curDate = this.$route.query.curDate || '';
    this.getChooseDatail();
  }

};
</script>

<style scoped>
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#ancyVideoIntroParent {
  width: 100% !important;
}
#ancyVideoIntroParent /deep/ .xgplayer-start{
  z-index: 99;
}
.c-whiteOpcity03{
background: rgba(255,255,255,0.3);
}
.dot-peinner {
  /* text-align: center; */
  /* line-height: 0.8rem; */
  position: relative;
  background: rgba(255,255,255,1);
}
.audioPlay /deep/ .vue-slider-dot {
  width: auto !important;
  height: auto !important;
  /* padding: 5px; */
}
</style>